<template>
  <view class="topBig">车友群</view>
  <view class="package column"
    :style="{padding:'0px 20rpx 20rpx',marginTop:'-180rpx',height:pageHeight+'px',justifyContent: 'space-between'}">
    <view :style="{width:'100%',height:pageHeights+'px',overflow:'auto',}">
      <view class="space-between list" v-for="item in 50">
        <view>豪翔物流车友群</view>
        <uni-icons type="circle" size="30" color="#999"></uni-icons>
        <!-- <uni-icons type="checkbox-filled" size="30" color="#558AF1"></uni-icons> -->
      </view>
    </view>
    <view class="add">确定</view>
  </view>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  const pageHeight = ref()
  const pageHeights = ref()
  uni.getSystemInfo({
    success: function (res) {
      pageHeight.value = res.windowHeight - 215;
      pageHeights.value = pageHeight.value - 80
    },
  });
</script>

<style scoped lang="less">
  .topBig {
    width: 100%;
    height: 551rpx;
    background-image: url(https://admin.anlan.tech/uploads/20230801/3fd8f3bf64bf326417b709b63d9a64a5.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 30rpx;
    box-sizing: border-box;
    color: #fff;
    text-align: center;
  }

  .list:nth-last-of-type(1) {
    border-bottom: 0px;
  }

  .list {
    padding: 30rpx 0px;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
  }

  .add {
    width: 480rpx;
    height: 100rpx;
    background: #558AF1;
    border-radius: 30px;
    text-align: center;
    line-height: 100rpx;
    color: #fff;
    margin: 0rpx auto ;
    font-size: 32rpx;
  }
</style>